<template>
  <div class="my-designer-content flex flex_column h_100">
    <header-toolbar v-if="designBarShow" class="header-toolbar"></header-toolbar>
    <canvas-main class="canvas-main"></canvas-main>
    <!--    <canvas-map v-show="designMapShow"></canvas-map>-->
    <footer-toolbar class="footer-toolbar"></footer-toolbar>
  </div>
</template>

<script>
import { computed, defineAsyncComponent, defineComponent, nextTick, onMounted } from "vue";
import { useDesignStore } from "../../../../store/design";

const HeaderToolbar = defineAsyncComponent(() =>
  import("./header-toolbar/index.vue")
);
const CanvasMain = defineAsyncComponent(() =>
  import("./canvas-main/index.vue")
);
const FooterToolbar = defineAsyncComponent(() =>
  import("./footer-toolbar/index.vue")
);
const canvasMap = defineAsyncComponent(() =>
  import("./canvas-main/canvas-map.vue")
);

export default defineComponent({
  name: "design-content",
  components: {
    HeaderToolbar,
    CanvasMain,
    FooterToolbar,
    canvasMap,
  },
  setup(props, ctx) {
    const designStore = useDesignStore();
    const designBarShow = computed(() => designStore.designBarShow);
    const designMapShow = computed(() => designStore.designMapShow);
    onMounted(()=>{
      nextTick(()=>{
        designStore.getEditor();
      })
    })
    return {
      designBarShow,
      designMapShow,
    };
  },
});
</script>

<style lang="less" scoped>
@import "index.less";
</style>